<template>
  <div class="newsinfo-container">
    <h1 class="title">{{ newsInfo.title }}</h1>
    <hr>
    <div class="con">
      <div class="con-intro">
        <span>{{ newsInfo.ratings_count }}人评价</span>
        <span>上映时间：{{newsInfo.year +'/'+ newsInfo.genres}}</span>
        主要演员：<p v-for="item in newsInfo.casts" :key="item.name">{{ item.name }}</p>
      </div>
      <div class="con-img">
        <img :src="newsInfo.images.small" alt>
      </div>
    </div>
    <hr>
    <span class="summary-title">{{newsInfo.title}}的简介</span>
    <p>{{newsInfo.summary}}</p>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      newsInfo: {
        images:{}
      },
      id: this.$route.params.id
    };
  },
  created() {
    this.getNewInfo();
  },
  methods: {
    getNewInfo() {
      this.$http
        .jsonp("https://api.douban.com/v2/movie/subject/" + this.id)
        .then(result => {
          if (result.body.id === this.id) {
            this.newsInfo = result.body;
          } else {
            // 失败的
            Toast("加载轮播图失败...");
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.newsinfo-container {
  padding: 0 15px;
  .title {
    font-size: 16px;
  }
  .con {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    width: 100%;
    .con-intro {
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    .con-img{
      width: 50%;
      img{
        width: 100%;
      }
    }
  }
  .summary-title{
    color: black;
    font-size: 16px;
  }
}
</style>
